# State Reducer

<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/state-reducer" />

👨‍💼 In this exercise, we want to prevent the toggle from updating the toggle
state after it's been clicked 4 times in a row before resetting. We could easily
add that logic to our reducer, but instead we're going to apply a computer
science pattern called "Inversion of Control" where we effectively say: "Here
you go! You have complete control over how this thing works. It's now your
responsibility."

Your job is to enable people to provide a custom `reducer` so they can have
complete control over how state updates happen in our `<Toggle />` component.

<callout-info class="aside">
	As an aside, before React Hooks were a thing, this was pretty tricky to
	implement and resulted in pretty weird code, but with useReducer, this is WAY
	better. I ❤️ hooks. 😍
</callout-info>
